Off Canvas Visualization

Off Canvas - Thinking Outside the Viewport

Say that you're developing a website with an off canvas navigation menu. When a user clicks on the hamburger icon, a nav element should show up alongside some main content on mobile viewports. Note that the nav isn't going to be visible until the user actually makes that click.

Take a look at the CSS below, which handles the nav menu's transition from hidden to visible. This open class is going to be applied on click, which means when the user clicks on the hamburger menu, this class will be applied.

nav {
  width: 300px;
  height: 100%;
  position: absolute;
  -webkit-transform: translate (-300px, 0);
  transform: translate(-300px, 0);
  transition: transform 0.3s ease;
}

nav.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

Use the CSS above to identify the set of drawings that accurately shows the way the nav shows up on screen. The open class is applied onclick.

Which of the four diagrams accurately shows what's going on in them? The gray box represents the viewport, the blue-ish purple box represents a nav menu, and of cuorse there's site content inside.

SOLUTION:

Diagram A